<template>
        <div class="popup">
            <!-- 搜索 -->
            <transition name="cancel">
                <form action="/">
                    <van-search
                        v-model="value"
                        show-action
                        :placeholder="defaultKeyword.keyword"
                        @search="onSearch"
                        @cancel="onCancel"
                        @input="oninput"
                    />
                </form>
            </transition>
            <!-- /搜索 -->
            <history v-model="value"  v-show="$store.getters.Sshow_change==1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @his_hot="his_hot1"></history>
            <Searchlist v-show="$store.getters.Sshow_change==2" :searchlists="searchlists" @goodsli="goodslis"></Searchlist>
            <SearchGoodsList v-show="$store.getters.Sshow_change==3" :search_goo="searchgoods" ></SearchGoodsList>
        </div>
</template>

<script>
import History from "@/components/historyList.vue"
import Searchlist from "@/components/searchlist.vue"
import SearchGoodsList from "@/components/searchgoodslist.vue"
import {Search,SearchList,goods_list} from "@/request/home.js"
import { Toast } from 'vant';
export default {
    name: 'Wjm0714Serach',

    data() {
        return {
            testval:"我是父亲数据", // 测试数据
            value:'',
            historyKeywordList:[],
            hotKeywordList:[],
            defaultKeyword:{},
            searchlists:[],
            searchgoods:'',
        };
    },

    methods: {
        // getChild (){
        //  console.log("子数据",this.$refs.headerChild.name)
        // },
        // 历史热门跳转
        his_hot1(v){
            this.searchgoods = v;
        },
        // 点击列表搜索
        goodslis(v){
            this.searchgoods = v;
        },
        // 回车搜索
        onSearch(value){
            this.$store.commit('Sshow',3);
            this.searchgoods = value;
        },
        // 取消
        onCancel(){
            this.$router.go(-1);
            // Toast('提示内容');
        },
        // 输入列表
        oninput(v){
            this.$store.commit('Sshow',2);
            SearchList(v)
            .then(res=>{
                this.searchlists = res.data.data;
            })
            .catch(err=>{
                console.log(err);
            })
        }
    },
    components:{
        History,
        Searchlist,
        SearchGoodsList
    },
    created(){
        this.$store.commit('Sshow',1);
        Search()
        .then(res=>{
            this.historyKeywordList = res.data.data.historyKeywordList;
            this.hotKeywordList = res.data.data.hotKeywordList;
            this.defaultKeyword = res.data.data.defaultKeyword;
        })
    }
};
</script>

<style lang="less">
    
    .popup{
        width: 100%;
        height: 100%;
        // background-color:lightblue;
        position: absolute;
        top: 0;
    }
    
</style>